<script setup lang="ts">
import { ref, computed } from 'vue'
import { Button, Space, Card, Modal } from 'ant-design-vue'
import { FileOutlined, EyeOutlined, DownloadOutlined } from '@ant-design/icons-vue'

const props = defineProps<{
  fileUrl: string
}>()

const previewModalVisible = ref(false)

// 计算预览弹框宽度为屏幕宽度的75%
const modalWidth = computed(() => {
  return window.innerWidth * 0.75
})

const isValidUrl = computed(() => {
  try {
    new URL(props.fileUrl)
    return true
  } catch {
    return false
  }
})

const fileUrl = computed(() => {
  return isValidUrl.value ? props.fileUrl : ''
})

// 获取文件名
const fileName = computed(() => {
  const url = new URL(fileUrl.value)
  return decodeURIComponent(url.pathname.split('/').pop() || '')
})

// 获取文件类型
const fileType = computed(() => {
  return fileName.value.split('.').pop()?.toLowerCase()
})

// 是否可以预览
const previewable = computed(() => {
  const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4']
  return supportedTypes.includes(fileType.value || '')
})

// 获取文件图标
const fileIcon = computed(() => {
  const imageTypes = ['jpg', 'jpeg', 'png', 'gif']
  if (imageTypes.includes(fileType.value || '')) {
    return 'image'
  }
  return 'file'
})

// 预览文件
const handlePreview = () => {
  if (previewable.value) {
    previewModalVisible.value = true
  } else {
    window.open(fileUrl.value)
  }
}

// 下载文件
const handleDownload = () => {
  const link = document.createElement('a')
  link.href = fileUrl.value
  link.download = fileName.value
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
</script>

<template>
  <div v-if="isValidUrl" class="file-preview">
    <Card hoverable class="file-card" @click="handlePreview">
      <div class="file-content">
        <!-- 文件图标/预览图 -->
        <div class="file-icon">
          <img 
            v-if="fileIcon === 'image'" 
            :src="fileUrl" 
            :alt="fileName"
            class="preview-image"
          />
          <FileOutlined v-else class="file-type-icon" />
        </div>

        <!-- 文件信息 -->
        <div class="file-info">
          <div class="file-name" :title="fileName">{{ fileName }}</div>
          <Space class="file-actions">
            <Button 
              type="link" 
              v-if="previewable"
              @click.stop="handlePreview"
            >
              <template #icon><EyeOutlined /></template>
              预览
            </Button>
            <Button 
              type="link"
              @click.stop="handleDownload"
            >
              <template #icon><DownloadOutlined /></template>
              下载
            </Button>
          </Space>
        </div>
      </div>
    </Card>

    <!-- 预览弹窗 -->
    <Modal
      v-if="previewable"
      v-model:visible="previewModalVisible"
      :footer="null"
      :width="modalWidth"
      wrapClassName="file-preview-modal"
      :title="fileName"
    >
      <div class="preview-container">
        <img 
          v-if="fileIcon === 'image'" 
          :src="fileUrl" 
          :alt="fileName"
          class="preview-content"
        />
        <iframe
          v-else-if="fileType === 'pdf'"
          :src="fileUrl"
          class="preview-content"
        ></iframe>
        <video
          v-else-if="fileType === 'mp4'"
          :src="fileUrl"
          controls
          class="preview-content"
        ></video>
      </div>
    </Modal>
  </div>
  <div v-else class="invalid-file">
    <Card>
      <p>无效的文件链接</p>
    </Card>
  </div>
</template>

<style lang="less" scoped>
// 添加全局样式
:global(.file-preview-modal) {
  .ant-modal-content {
    padding: 0;
    .ant-modal-header {
      padding: 16px 24px;
      margin: 0;
    }
    
    .ant-modal-body {
      padding: 0;
      height: calc(90vh - 55px); // 减去标题栏高度，增加整体高度
    }
  }
}

.file-preview {
  margin-top: 10px;
  .file-card {
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .file-content {
      display: flex;
      align-items: center;
      gap: 16px;

      .file-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .preview-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px;
        }

        .file-type-icon {
          font-size: 24px;
          color: #1890ff;
        }
      }

      .file-info {
        flex: 1;
        min-width: 0;

        .file-name {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .file-actions {
          opacity: 0.8;
          transition: opacity 0.3s;
        }
      }

      &:hover {
        .file-actions {
          opacity: 1;
        }
      }
    }
  }
}

.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; // 使用全部可用高度
  background: #f0f2f5;

  .preview-content {
     width: 100%;
    min-height: 700px;
    max-height: 100%;
     &[type="application/pdf"] {
       min-height: 200px;
       border: none; // 移除iframe边框
       display: block; // 确保正确显示
     }
  }
}

.invalid-file {
  :deep(.ant-card-body) {
    text-align: center;
    color: #ff4d4f;
  }
}
</style> 